import React, { Component } from 'react'
import _ from 'lodash'
// 高阶组件：本质就是一个函数，传入一个组件，返回一个增强后的组件
// 此高阶组件的作有，统一布局，顶部和底部，全局统一的
// 高阶组件定义后，一定要把原来的props数据向下传递，否则会丢失

// 1.定义一个函数，函数中必须有一个参数，此参数指定为一个组件，此参数的首字母大写
// 2.在此函数中返回一个增强后的组件(类组件|函数组件)
const withLayout = Cmp => {
  return class Layout extends Component {
    render() {
      // console.log('高阶组件',this.props)
      // props不能直接修改，但是现在我想在高阶组件中对于传入过来的props进行修改后返回子组件
      // 深复制一个props对象，在复制后的对象中进行操作
      let proxyData = _.cloneDeep(this.props)
      proxyData.age = proxyData.age > 20 ? '保密' : proxyData.age

      return (
        <div>
          <h3>导顶</h3>
          {/* <Cmp title={this.props.title} /> */}
          {/* 把父组件传过来的props,代理传给子组件 */}
          {/* <Cmp {...this.props} /> */}
          <Cmp {...proxyData} />
          <div>底顶</div>
        </div>
      )
    }
  }
}

export default withLayout
